<template>
  <div class="container login-container">
    <div class="card login-card">
      <h1 style="text-align: center; margin-bottom: 20px; color: #333; font-size: 1.6rem;">
       志刚的 DevOps 测试平台
      </h1>
      
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名</label>
          <input
            id="username"
            v-model="form.username"
            type="text"
            placeholder="请输入用户名"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input
            id="password"
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            required
          />
        </div>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <div v-if="successMessage" class="success-message">
          {{ successMessage }}
        </div>
        
        <div class="button-group">
          <button type="button" class="btn btn-secondary" @click="handleRegister">
            注册
          </button>
          <button 
            type="submit" 
            class="btn btn-primary"
            :disabled="loading"
            :class="{ loading: loading }"
          >
            {{ loading ? '登录中...' : '登录' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default {
  name: 'Login',
  setup() {
    const router = useRouter()
    const loading = ref(false)
    const errorMessage = ref('')
    const successMessage = ref('')
    
    const form = reactive({
      username: 'gang',
      password: 'dan'
    })
    
    const handleLogin = async () => {
      loading.value = true
      errorMessage.value = ''
      successMessage.value = ''
      
      try {
        const response = await axios.post('/api/auth/login', {
          username: form.username,
          password: form.password
        })
        
        if (response.data.success) {
          localStorage.setItem('isAuthenticated', 'true')
          localStorage.setItem('user', JSON.stringify(response.data.data.user))
          successMessage.value = '登录成功！正在跳转...'
          
          setTimeout(() => {
            router.push('/dashboard')
          }, 1000)
        } else {
          errorMessage.value = response.data.message || '登录失败'
        }
      } catch (error) {
        console.error('登录错误:', error)
        if (error.response && error.response.data) {
          errorMessage.value = error.response.data.message || '登录失败'
        } else {
          errorMessage.value = '网络错误，请检查后端服务是否启动'
        }
      } finally {
        loading.value = false
      }
    }
    
    const handleRegister = () => {
      // 注册功能暂时不实现
      alert('注册功能暂未开放')
    }
    
    return {
      form,
      loading,
      errorMessage,
      successMessage,
      handleLogin,
      handleRegister
    }
  }
}
</script>
